<template>
    <div class="header">
        <!-- 头部搜索及登录 -->
        <div class="home-header">
            <div class="header-logo">
                <img src="/static/logo.png" alt="">
            </div>
            <div class="header-search" @click="toSearch">
                <van-icon class="search-icon" name="search" />
                <span class="search-title">搜索商品, 共144515款好物</span>
            </div>
            <van-button class="header-btn" plain type="danger" size="mini" @click="toLogin" v-if="!token">登录</van-button>
        </div>
        <!-- 头部导航 -->
        <div class="nav">
            <div class="tabWrap">
                <div class="tabs" v-if="!flag">
                    <van-tabs v-model:active="active" title-active-color="#dd1a21" color="#dd1a21" shrink >
                        <van-tab title="推荐" to="/home"></van-tab>
                        <van-tab v-for="(item, index) in categoryList" :title="item.navName" :key="index" to="/category">
                        </van-tab>
                    </van-tabs>
                </div>
                <div class="tabTitle" v-if="flag">全部频道</div>
                <div class="toggleWrap">
                    <div class="liner"></div>
                    <div class="togle" :class="{ toggleActive: flag }" @click="pullDown">
                        <van-icon class="icon" name="arrow-down" size="20" />
                    </div>
                </div>
                <div class="moreCate" v-if="flag">
                    <div class="cateTag cateTag-active">推荐</div>
                    <div class="cateTag" v-for="(item, index) in categoryList" :key="index">{{ item.navName }}</div>
                </div>
            </div>
        </div>
        <div class="mask" v-if="flag"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: '',
})
</script>

<script lang="ts" setup>
import {ref} from 'vue'
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/home'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const homeStore = useHomeStore()
const {categoryList} =storeToRefs(homeStore)
const active = ref(0)
const flag = ref<boolean>(false)
const token = localStorage.getItem('token')
// 点击去到登录页
function toLogin() {
  router.push({
    path: '/login',
    query: { path: route.path }
  })
}

// 点击去到搜索页
function toSearch() {
  router.push({
    path: '/search'
  })
}


// 点击弹出下拉框
function pullDown(){
  flag.value = !flag.value
}

// function onClickTab(){
//     router.push({
//         path:'/category'
//     })
// }
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
}
.header .home-header {
  display: flex;
  padding: 8px 15px;
  align-items: center;
  position: relative;
  z-index: 2;
  background: #fff;

}

.header-logo img {
  width: 69px;
  height: 20px;
  margin-right: 10px;
}

.header-search {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 14px;
  background-color: #ededed;
  flex: 1;
  border-radius: 5px;
}

.search-icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}

.search-title {
  color: #666;
}

.header-btn {
  width: 37px;
  height: 20px;
  font-size: 12px;
  margin-left: 8px;
}

/* 头部导航 */
.nav {
  width: 100%;
  position: relative;
  z-index: 2;
}

.nav .tabWrap {
  width: 100%;
  position: relative;
  background: #fff;
}

.van-tabs {
  --van-tabs-line-height: 30px;
}

.nav .tabWrap {
  width: 100%;
}

.nav .tabWrap .tabTitle {
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
  font-size: 14px;
  /* display: none; */
}

.nav .tabWrap .moreCate {
  padding-top: 12px;
  font-size: 12px;
  overflow: hidden;
  /* display: none; */
}

.nav .tabWrap .moreCate .cateTag {
  width: 74px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  border: 1px solid #ccc;
  float: left;
  margin: 0 0 20px 15px;
  background: #fafafa;
  border-radius: 2px;
}

.nav .tabWrap .moreCate .cateTag-active {
  border: 1px solid #dd1a21;
  color: #dd1a21;
}

.van-tabs {
  --van-tabs-card-height: 30px;
}

.nav .toggleWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
}

.nav .toggleWrap .liner {
  width: 30px;
  height: 30px;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff);
}

.nav .toggleWrap .togle {
  width: 50px;
  height: 30px;
  text-align: center;
  background: #fff;
}

.nav .toggleWrap .togle .icon {
  width: 15px;
  height: 15px;
  margin-top: 7.5px;
  display: inline-block;
  vertical-align: middle;
}

.nav .toggleWrap .togle.toggleActive .icon {
  transform: rotate(180deg);
}

/* 遮罩层样式 */
.header .mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1;
  /* display: none; */
}
</style>